<template>
  <div>
    <el-form ref="form" label-position="top" label-width="120px" size="small">
      <el-row :gutter="10">
        <block v-for="(formItem, index) in formList" :key="index">
          <el-col :span="8">
            <template v-if="formItem.tagIcon=='input'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-input style="width: 260px" :placeholder="formItem.placeholder" v-model="formItem.defaultValue" :disabled="disabled"></el-input>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='textarea'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-input style="width: 260px" :placeholder="formItem.placeholder" type="textarea" v-model="formItem.defaultValue" :disabled="disabled"></el-input>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='select'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-select style="width: 260px" v-model="formItem.defaultValue" :placeholder="formItem.placeholder" :disabled="disabled">
                  <el-option
                    v-for="item in formItem.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='cascader'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-cascader
                  style="width: 260px"
                  :options="formItem.options"
                  v-model="formItem.defaultValue"
                  :disabled="disabled"
                  :placeholder="formItem.placeholder"
                ></el-cascader>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='radio'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-radio-group style="width: 260px" v-model="formItem.defaultValue" :disabled="disabled">
                  <el-radio v-for="(radioItem,index) in formItem.options" :label="radioItem.value">{{ radioItem.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='checkbox'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-checkbox-group style="width: 260px" v-model="formItem.defaultValue" :disabled="disabled">
                  <el-checkbox v-for="checkBoxItem in formItem.options" :label="checkBoxItem.value" :key="checkBoxItem.value">{{ checkBoxItem.label }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='switch'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-switch width="260px" v-model="formItem.defaultValue" active-color="#13ce66" inactive-color="#ff4949" active-text="1" inactive-text="2"
                           :disabled="disabled"></el-switch>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='date'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-date-picker v-model="formItem.defaultValue" type="date" :placeholder="formItem.placeholder" :disabled="disabled" value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='date-range'">
              <el-form-item :label="formItem.label" style="height:100px">
                <el-date-picker
                  v-model="formItem.defaultValue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabled="disabled"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </template>

            <template v-else-if="formItem.tagIcon=='upload'" >
              <el-form-item :label="formItem.label" style="height:150px">
                <ImageUpload :isShowTip="false" :disabled="disabled"></ImageUpload>
              </el-form-item>
            </template>

          </el-col>
        </block>
      </el-row>
    </el-form>

  </div>
</template>

<script>

export default {
  components: {},
  props: {
    formList: {
      type: Array,
      default: []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },

  computed: {},

  methods: {},
  mounted() {
  },

}
</script>

<style lang="scss" scoped>
</style>
